{#客户管理界面#}
{% extends 'laout.html' %}
{% load static %}
{% block content %}
{#导入文件    #}
{% load permission %}
    {# 创建一个组合搜索框 由web\templates\include 路径导入     #}
    {% include "include/search_group.html" %}

    <div style="margin-bottom: 5px" class="clearfix">
        {#导入simple_tag自定义模板功能 解决权限控制按钮问题  传值：request ; 按钮url的name属性  #}
        {% add_permission request 'customer_add' %}
        {#  创建一个搜索框      #}
        <div class="right">
            {# 以表单get方式提交           #}
            <form class="form-inline" method="get">
                <div class="form-group">
                    {#提交到当前页面的格式：keyword=值 把搜索的内容保存：value="{{ keyword }}"  #}
                    <input name="keyword" type="text" class="form-control" placeholder="请输入关键字" value="{{ keyword }}">
                </div>
                <button type="submit" class="btn btn-default">
                    {#加入一个搜索图标#}
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
        </div>
    </div>

    <table class="table table-striped table-bordered">

    <div class="row">
        <thead>
            <tr >
                <th>ID</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>账户余额</th>
                <th>级别</th>
                <th>注册时间</th>
                <th>创造者</th>
                <th>交易记录</th>
                <th>重置密码</th>
                {# 防止没功能时显示空白窗格          #}
                {% if request|has_permission:"customer_edit,customer_delete" %}
                    <th>操作</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for row in queryset %}
{#                每次渲染界面时 加个行号#}
                <tr row-id="{{ row.id }}">
                    <td>{{ row.id }}</td>
                    <td>{{ row.username }}</td>
                    <td>{{ row.mobile }}</td>
                    <td>{{ row.balance }}</td>
                    {# django会自动跨表帮你查询                   #}
                    <td>{{ row.level.title }}（{{ row.level.percent }}%）</td>
                    {# 修改默认显示时间的格式  元素|date:"Y-m-d H:i:s"                 #}
                    <td>{{ row.create_date|date:"Y-m-d H:i:s" }}</td>
                    <td>{{ row.creator.username }}</td>
                    <td>
                        {# 跳转交易记录需要携带id 方便查找数据库                       #}
                        <a href="{% url "customer_charge" pk=row.id  %}">交易记录</a>
                    </td>
                    <td>
                        <a href="{% url "customer_reset" pk=row.id  %}">重置密码</a>
                    </td>
{#                    判断是否有删除或编辑权限，没有 去除标签<td>#}
                    {% if request|has_permission:"customer_edit,customer_delete" %}
                        <td>
                            {#  a标签+按钮样式，实现按钮#}
                            {#导入simple_tag自定义模板功能 解决权限控制按钮问题  传值：request ; 按钮url的name属性  #}
                            {% edit_permission request 'customer_edit' pk=row.id %}
    {#                        <a href="{% url "customer_edit" pk=row.id %}" class="btn btn-primary btn-xs">编辑</a>#}
    {#                        <span>|</span>#}
    {#                        ajax删除#}
                            {% delete_permission request "customer_delete" pk=row.id %}
    {#                        <a href="#" cid="{{ row.id }}" class="btn btn-danger btn-xs btn-delete" >删除</a>#}

                        </td>
                    {% endif %}
                </tr>
            {% endfor %}
        </tbody>
    </div>
    </table>
    {#分页功能    #}
    <ul class="pagination">
        {{ pager_string }}
    </ul>

    {#导入 一个删除提示的模态对话框 使用警告框样式  #}
    {% include 'include/delete_modal.html' %}




{% endblock %}

{% block js %}
{#    删除逻辑#}
    <script>
    {#    全局变量 存需要删除的数据的id，方便在确认中使用#}
    var DELETE_ID;
    {#ajax数据提交的地址#}
    var DELETE_URL = "{% url 'customer_delete' %}"
    $(function () {
    bindDeleteEvent();
    bindConfirmDeleteEvent();
});
    {#使用函数调用的方式 激活模态对话框    #}
    function bindDeleteEvent() {

        $(".btn-delete").click(function (){
             {#清空异常提示#}
             $("#deleteError").empty();
            {#激活显示#}
            $("#deleteModal").modal('show')
             {#通过给删除按钮传一个id的属性cid，然后在这里获取id值 #}
            var cid = $(this).attr("cid");
            DELETE_ID = cid
            console.log(cid)
        });
        {#id用# 类用.#}
        $("#btnCancelDelete").click(function (){
            {#隐藏收起#}
            $("#deleteModal").modal('hide')
        })
    }
    function bindConfirmDeleteEvent(){
    {#删除功能    #}
    $("#btnConfirmDelete").click(function (){
        {#使用ajax发送请求到后台确认删除    #}
        $.ajax({
            url: DELETE_URL,
            type:"GET",
            data:{cid: DELETE_ID},
            {#转json数据集#}
            dataType: "JSON",
            success:function(res){
                if(res.status){
                      // 删除成功
                    // 方式一：页面的刷新
                    // location.reload();
                    // 方式二：找到当前数据行，在界面中删除
                    $("tr[row-id='" + DELETE_ID + "']").remove(); //删除元素 拼接
                    $("#deleteModal").modal('hide'); //隐藏
                    console.log(res);
                }else {
                     {#删除失败 添加报错内容#}
                     $("#deleteError").text(res.detail);
                }
            }
        })
    })
    }

    </script>
{% endblock %}